import { createPortal } from "react-dom"
import { Modal } from "./Modal"
import { useState } from "react"
export default function Comp4() {
  const [visible, setVisible] = useState(false)
  const container = <div>container</div>
  return <>
    <h1>createPortal示例</h1>
    <p>将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似</p>
    <p>应用场景：弹窗、下拉框、全局提示、全局遮罩、全局loading</p>
    <p>Antd 的 Modal 组件，就是挂载到 body 上的</p>
    {createPortal(container, document.body)}
    <button onClick={() => setVisible(true)}>打开弹窗</button>
    <button onClick={() => Modal.info()}>Api打开弹窗</button>
    <Modal visible={visible} onClose={() => setVisible(false)} />
  </>
}